<template>
	<view>
		<view class="ShopRegistration">
			<image src="../../../../static/images/register_bg.png" mode="scaleToFill" class="bgImg"></image>
			<view class="register_log">
				<image src="../../../../static/images/register_log_03_03.png" mode="widthFix"></image>
			</view>
			<view class="register_form">
				<view class="input_view">
					<view>
						<image src="../../../../static/images/register_log_03.png" mode="widthFix" class="register_icon"></image>
					</view>
					<view>
						<input type="number" placeholder="请输入手机号" placeholder-class="placeholder" v-model="phoneVal" @input="phone"></input>
					</view>
					<view>
						<image src="../../../../static/images/register_delete_03.png" mode="widthFix" v-show="delete_phone" class="register_delete" @click="deletePhoneVal"></image>
					</view>
				</view>
				<view class="input_view">
					<view>
						<image src="../../../../static/images/register_log_06.png" mode="widthFix" class="register_icon"></image>
					</view>
					<view>
						<input type="number" placeholder="请输入验证码" placeholder-class="placeholder" v-model="codeVal"></input>
					</view>
					<view class="register_code">
						<button @click="getCode()" v-if="show_Code">获取验证码</button>
						<button v-if="!show_Code">{{count}} s</button>
					</view>
				</view>
				<view class="input_view">
					<view>
						<image src="../../../../static/images/register_log_08.png" mode="widthFix" class="register_icon"></image>
					</view>
					<view>
						<input type="password" placeholder="请输入密码" placeholder-class="placeholder" v-model="firstPasswordVal"  @input="firstPassword"></input>
					</view>
					<view>
						<image src="../../../../static/images/register_delete_03.png" mode="widthFix" v-show="delete_firstPassword" class="register_delete" @click="deleteFirstPassword"></image>
					</view>
				</view>
				<view class="input_view">
					<view>
						<image src="../../../../static/images/register_log_10.png" mode="widthFix" class="register_icon"></image>
					</view>
					<view>
						<input type="password" placeholder="请确认密码" placeholder-class="placeholder" v-model="nextPasswordVal" @input="nextPassword"></input>
					</view>
					<view>
						<image src="../../../../static/images/register_delete_03.png" mode="widthFix" v-show="delete_nextPassword" class="register_delete"  @click="deleteNextPassword"></image>
					</view>
				</view>
				<!-- <view class="input_view">
					<view>
						<image src="../../../../static/images/register_log_12.png" mode="widthFix" class="register_icon"></image>
					</view>
					<view>
						<input type="number" placeholder="请输入店铺名称" placeholder-class="placeholder" v-model="shopNameVal" @input="shopName"></input>
					</view>
					<view>
						<image src="../../../../static/images/register_delete_03.png" mode="widthFix" v-show="delete_shopName" class="register_delete" @click="deleteShopNameVal"></image>
					</view>
				</view> -->
				<view class="register_button">
					<button @click="resetPassword">重置密码</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				delete_phone:false,
				delete_firstPassword:false,
				delete_nextPassword:false,
				delete_shopName:false,
				phoneVal:"",
				codeVal:"",
				firstPasswordVal:"",
				nextPasswordVal:"",
				shopNameVal:"",
				show_Code:true,
				count: '',
                timer: null,
			}
		},
		methods: {
		  //监听input值变化，值不为空则出现清除input值的图片
		  phone(){
			  if(this.phoneVal!=""){
				  this.delete_phone=true
			  }else{
				  this.delete_phone=false
			  } 
		  },
		  firstPassword(){
			  if(this.firstPasswordVal!=""){
			  		this.delete_firstPassword=true
			  }else{
			  		this.delete_firstPassword=false
			  } 
		  },
		  nextPassword(){
			  if(this.nextPasswordVal!=""){
			  		this.delete_nextPassword=true
			  }else{
			  		this.delete_nextPassword=false
			  } 
		  },
		  // shopName(){
			 //  if(this.shopNameVal!=""){
			 //  		this.delete_shopName=true
			 //  }else{
			 //  		this.delete_shopName=false
			 //  } 
		  // },
		  //点击图片清除input值
		  deletePhoneVal(){
			  this.phoneVal="";
			  this.delete_phone=false;
		  },
		  deleteFirstPassword(){
			  this.firstPasswordVal="";
			  this.delete_firstPassword=false;
		  },
		  deleteNextPassword(){
			  this.nextPasswordVal="";
			  this.delete_nextPassword=false;
		  },
		  // deleteShopNameVal(){
			 //  this.shopNameVal="";
			 //  this.delete_shopName=false;
		  // },
		  //验证码60s函数
		  checkCode(){
			  if(!this.phoneVal==""){  //手机号
				 //手机号格式验证
					if(!(/^1[34578]\d{9}$/.test(this.phoneVal))){ 
					  uni.showToast({
						title:"手机号有误，请重新输入!",
						duration:2000,
						icon:"none"
					 })  
					  return false; 
				    }
					const TIME_COUNT = 60;
				    if (!this.timer) {
				       this.count = TIME_COUNT;
				       this.show_Code = false;
				       this.timer = setInterval(() => {
				       if (this.count > 0 && this.count <= TIME_COUNT) {
				             this.count--;
				       }else {
				             this.show_Code = true;
				             clearInterval(this.timer);
				             this.timer = null;
				       }
				      }, 1000)
				  }
			  }else{
					uni.showToast({
					title:"手机号不得为空！",
					duration:2000,
					icon:"none"
				 })  
			  }
			  
		  },
		  //验证码按钮点击事件
		  getCode(){
			 let that = this;
			 this.checkCode();
			 uni.request({
				 url: this.$store.state.URL + 'verify/verify_code/code',
				 data:{
				 	 mobile: this.phoneVal,
					 code_type: "update_password"
				 },
				 success(res){
					 uni.showToast({
					 	title:"验证码已发送",
					 	duration:1000,
					 	icon:"none",
					 	mask:true
					 })
					 console.log(res.data);
				 },
			 })
          },
		   //表单验证
		  checkForm(){
		  			   // 不为空
		  			  if(this.phoneVal==""){  //手机号
		  			  	 uni.showToast({
		  			  	 	title:"手机号不得为空！",
		  			  		duration:2000,
		  			  		icon:"none"
		  			  	 })  
		  			  }else{
		  			  		//手机号格式验证
		  			  		if(!(/^1[34578]\d{9}$/.test(this.phoneVal))){ 
		  			          uni.showToast({
		  			         	title:"手机号有误，请重新输入!",
		  			         	duration:2000,
		  			         	icon:"none"
		  			         })  
		  			          return false; 
		  			       } 
		  			  }
		  			  if(this.codeVal==""){  //验证码
		  			  		 uni.showToast({
		  			  			title:"验证码不得为空！",
		  			  			duration:2000,
		  			  			icon:"none"
		  			  		})  
		  			  }
		  			  if(this.firstPasswordVal=="" || this.nextPasswordVal==""){  //密码
		  			  		uni.showToast({
		  			  			title:"密码不得为空！",
		  			  			duration:2000,
		  			  			icon:"none"
		  			  		})  
		  			  }else{
		  			  		if(this.firstPasswordVal!==this.nextPasswordVal){
		  			  			uni.showToast({
		  			  				title:"密码与确认密码不一致，请重新输入！",
		  			  				duration:2000,
		  			  				icon:"none"
		  			  			}) 
		  			  		}
		  			  }
		  			  // if(this.shopNameVal==""){  //店铺名称
		  			  // 		uni.showToast({
		  			  // 			title:"店铺名称不得为空！",
		  			  // 			duration:2000,
		  			  // 			icon:"none"
		  			  // 		})  
		  			  // }
		  },
		  //重置密码按钮点击函数
		  resetPassword(){
		  		this.checkForm();
				let that = this;
				uni.request({
					url: this.$store.state.URL + '/merchant/merchant/mini_merchant_forgetpassword',
					data:{
						token: this.$store.state.token,
						adminAccount: this.phoneVal,
						code: this.codeVal,
						adminPassword: this.firstPasswordVal,
						adminPassword_confirm: this.nextPasswordVal
					},
					success: (res) => {
						 uni.showToast({
							title:"重置密码成功",
							duration:1000,
						})
						setTimeout(function(){
							uni.redirectTo({
								url:"../ShopLogin/ShopLogin"
							})
						},1000)
						console.log(res.data);
					},
					 fail(res) {
						uni.showToast({
							title:"重置密码失败",
							duration:1000,
						})
					}
				})
		  }
		},
		onLoad() {
			
		}
	}
</script>

<style>
 .bgImg{
	 position: absolute;
	 top:0;
	 left:0;
	 width:100%;
	 height:100%;
	 z-index: -1;
 }
 .register_log{
	 margin-top:6%;
	 margin-left:40%;
	 position:relative;
 }
 .register_log image{
	 width:151upx;
	 height:205upx;
 }
 .register_form{
	 margin-top:30upx;
	 width:90%;
	 height:auto;
	 margin:0 auto;
	 background:#fff;
	 text-align: center;
	 padding-bottom: 50upx;
	 border-radius: 30upx;
 }
 .input_view view:nth-of-type(2){
	 margin-left: 70upx;
 }
 .input_view{
	 height: 44upx;
/* 	 border-radius: 20%; */
     display: flex;
	 /* justify-content: flex-start; */
	 padding-top:50upx;
	 padding-bottom: 20upx;
	 margin:30upx 10%;
	 border-bottom: 1upx solid #cccccc;
 }
 .input_view .register_icon{
	 width:37upx;
	 height:37upx;
 }
 .input_view .register_delete{
	 width:44upx;
	 height:44upx;
 }
 .input_view input{
	 font-size: 28upx;
	 color: #333;
 }
 .register_code{
	 width:161upx;
	 height:50upx;
 }
 .register_code button{
	 font-size:24upx;
	 color:#fdfdfd;
	 background: #f294a6;
	 width:176upx;
	 height:50upx;
	 line-height: 50upx;
	 border-radius: 25upx;
 }
 .placeholder{
	 font-size: 28upx;
	 color:#999;
 }
 /* .input_view image{
	 display: inline-block;
 } */
 .register_button{
	 margin-top:30upx;
 }
 .register_button button{
	 font-size: 30upx;
	 color: #fff;
	 background:#f2526f;
	 width:544upx;
	 heihgt:83upx;
	 border-radius: 42upx;
 }
 .register_toLogin{
	 font-size:24upx;
	 color:#333;
	 margin-top:30upx ;
 }
</style>
